<template>
  <div class="page-header-index-wide">
    <a-row>
      <a-col v-if="isSuper" :span="16">
        <a-card :loading="loading" :bordered="false" title="企业（租户）统计">
          <line-chart-multid
            :padding="'0 0 0px 0px'"
            :fields="visitFields"
            :dataSource="visitInfo"
            :aliases="visitAliase"
          ></line-chart-multid>
        </a-card>
        <a-card :loading="loading" :bordered="false" title="资源统计">
          <bar-multid :padding="'0 0 32px 0px'" :fields="resFields" :dataSource="resData" :aliases="resAliase" />
        </a-card>
      </a-col>
      <a-col v-if="isSuper" :span="8">
        <a-card :style="{ marginLeft: '10px' }" :loading="loading" :bordered="false" title="应用中心">
          <a-list :grid="{ gutter: 24, xl: 4, lg: 2, md: 2, sm: 1, xs: 1 }" :dataSource="appDataSource">
            <a-list-item slot="renderItem" slot-scope="item">
              <a-card class="appCard" :hoverable="true" :bordered="false">
                <a :href="item.appUrl" target="_blank">
                  <img style="width: 64px;height: 64px;" :src="item.appIcon === '' || item.appIcon === null || item.appIcon === undefined ? defaultImg:item.appIcon" />
                  <div class="appCard-name">{{ item.appName }}</div>
                </a>
              </a-card>
            </a-list-item>
          </a-list>
        </a-card>
        <a-card :style="{ marginLeft: '10px' }" :loading="loading" :bordered="false" title="APP中心">
          <a-list :grid="{ gutter: 24, xl: 4, lg: 2, md: 2, sm: 1, xs: 1 }" :dataSource="clientDataSource">
            <a-list-item slot="renderItem" slot-scope="item">
              <a-card class="appCard" :hoverable="false" :bordered="false">
                <a target="_blank">
                  <img style="width: 96px;height: 96px;" :src="item.appIcon === '' || item.appIcon === null || item.appIcon === undefined ? defaultImg:item.appIcon" />
                  <div class="appCard-name">{{ item.appName }}</div>
                </a>
              </a-card>
            </a-list-item>
          </a-list>
        </a-card>
      </a-col>
      <a-col v-else :span="24">
        <a-card :style="{ marginLeft: '10px' }" :loading="loading" :bordered="false" title="应用中心">
          <a-list :grid="{ gutter: 24, xl: 12, lg: 2, md: 6, sm: 1, xs: 1 }" :dataSource="appDataSource">
            <a-list-item slot="renderItem" slot-scope="item">
              <a-card class="appCard" :hoverable="true" :bordered="false">
                <a :href="item.appUrl" target="_blank">
                  <img style="width: 64px;height: 64px;" :src="item.appIcon === '' || item.appIcon === null || item.appIcon === undefined ? defaultImg:item.appIcon" />
                  <div class="appCard-name">{{ item.appName }}</div>
                </a>
              </a-card>
            </a-list-item>
          </a-list>
        </a-card>
        <a-card :style="{ marginLeft: '10px' }" :loading="loading" :bordered="false" title="APP中心">
          <a-list :grid="{ gutter: 24, xl: 12, lg: 2, md: 6, sm: 1, xs: 1 }" :dataSource="clientDataSource">
            <a-list-item slot="renderItem" slot-scope="item">
              <a-card class="appCard" :hoverable="false" :bordered="false">
                <a target="_blank">
                  <img style="width: 96px;height: 96px;" :src="item.appIcon === '' || item.appIcon === null || item.appIcon === undefined ? defaultImg:item.appIcon" />
                  <div class="appCard-name">{{ item.appName }}</div>
                </a>
              </a-card>
            </a-list-item>
          </a-list>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import ACol from 'ant-design-vue/es/grid/Col'
import BarMultid from '@/components/chart/BarMultid'
import LineChartMultid from '@/components/chart/LineChartMultid'
import { getTenantStats, getAssetStats, getAppInfo } from './service'
import defaultImg from '@/assets/defaultLogo.png'

export default {
  name: 'IndexChart',
  components: {
    ACol,
    BarMultid,
    LineChartMultid
  },
  data() {
    return {
      // isSuper: Vue.ls.get(IS_SUPER_TENANT),
      isSuper: false, // 暂不显示企业统计和资源统计,后期放开
      preUrl: window._CONFIG['staticDomainURL'] + '/',
      loading: true,
      resFields: [],
      resData: [],
      resAliase: [
        { field: 'projectNum', alias: '项目数' },
        { field: 'deviceNum', alias: '设备数' }
      ],
      visitFields: ['tenantNum'],
      visitInfo: [],
      visitAliase: [{ field: 'tenantNum', alias: '企业数' }],
      appDataSource: [],
      clientDataSource: [],
      defaultImg
    }
  },
  created() {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
    this.initLogInfo()
  },
  methods: {
    initLogInfo() {
      if (this.isSuper) {
        getTenantStats().then(res => {
          if (res.success) {
            this.visitInfo = res.result
          }
        })
        getAssetStats().then(res => {
          if (res.success) {
            this.resData = res.result.res
            this.resFields = res.result.fields
          }
        })
      }
      getAppInfo({ type: 2, filter_auth: true }).then(res => {
        if (res.success) {
          this.appDataSource = res.result
        }
      })
      getAppInfo({ type: 4, filter_auth: true }).then(res => {
        if (res.success) {
          this.clientDataSource = res.result
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}
.appCard {
  text-align: center;
  // width: 125px;
  overflow: hidden;
  height: 125px;
  padding-left: 0px;
  padding-right: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 4px;
  /deep/.ant-card-body {
    padding: 10px;
  }
  .appCard-name {
    padding-top: 10px;
    width: 100%;
    flex: 1;
    height: 40px;
  }
}
/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;

  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    color: rgba(0, 0, 0, 0.45);
    display: inline-block;
    font-size: 0.95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }
  p {
    line-height: 42px;
    margin: 0;
    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}
</style>
